<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特色功能点</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>

    <style>
        .feature_cnt{
            display: flex;
        }
        .feature_list{
            padding: 6% 11%;
            flex:0 0 47%; 
            max-width: 47%;
            background-color: var(--c_theme);
            color: var(--c_b_nav);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            opacity: 0.8;
        }
        .feature_list li{
            padding: 10px 0;
        }
        .feature_list li h3{
            font-size: var(--f_subtitle_contact);
            line-height: var(--l_subtitle_contact);
        }
        .feature_list li p{
            font-size: var(--f_describe);
            line-height: var(--l_describe);
        }
        .feature_text{
            padding: 6% 15.6% 6% 6%;
            flex:0 0 53%; 
            max-width: 53%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .feature_text p{
            padding-top: 40px;
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color: var(--c_text);
        }
        .feature_adorn{
            margin-top: 100px;
            width: 100px;
            height: 1px;
            background-color: var(--c_frame);
        }
        @media (max-width:1199px) {
            .feature_text{
                padding: 6% 6% 6% 6%;
            }
        } 
        @media (max-width:768px) {
            .feature_cnt{
                flex-wrap: wrap;
            }
            .feature_list{
                flex: 0 0 100%;
                max-width: 100%;
                padding: 8px 20px;
                order: 1;
            }
            .feature_text p{
                padding-top: 0;
                line-height: 26px;
            }
            .feature_text{
                flex: 0 0 100%;
                max-width: 100%;
                padding: 0 20px 6%;
                order: 0;
            }
            .feature_adorn{
                display: none;
            }
            .feature_text p{
                padding-top: 10px;
            }
            .feature .public_title {
                padding-bottom: 0px;
            }
        }
    </style>
</head>

<body>
    <div class="feature modular title_left">
        <div class="feature_cnt">
            <ul class="feature_list">
                <li>
                    <h3>公司创意定位 </h3>
                    <p>为您提供了众多广告条件，助您快速找准方向</p>
                </li>
                <li>
                    <h3>多样广告资源 </h3>
                    <p>运用各种渠道，量身定制合理的方案</p>
                </li>
                <li>
                    <h3>服务贴心 </h3>
                    <p>为客户提供完美的服务，及时快速跟进</p>
                </li>
            </ul>
            <div class="feature_text">
                <div class="public_title">
                    <h2>品牌优势</h2>
                    <p>Advantage</p>
                </div>
                <p>我们为您提供专业设计解决方案通过研究商业模式来定义品牌模式提供优秀的品牌整合解决方案，令品牌长远发展，更具竞争力新成立企业，需要有好的标志，好的品牌形象有助于提升企业。好的品牌形象有助于提升企业整体竞争力。</p>
                <div class="feature_adorn"></div>
            </div>
        </div>
    </div>
</body>
</html>